import React, { useState, useEffect, useCallback } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { getSofPdplanFindDetail } from '../api'
import { ip } from '../../../Api/http'

import {
    ProductionDetailsOperationAll
} from './style';
import { PageHeader, Typography, message, Row, Col, Button, Space } from "antd";

const { Title } = Typography;

const ProductionPlanDetails = () => {
    const history = useHistory();
    const location = new useLocation();
    const [planDetail, setPlanDetail] = useState(undefined);
    const productionDetailsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofPdplanFindDetail({ pdPlanId: location.state.pdPlanId });
                if (code === '20000') {
                    setPlanDetail(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [location.state],
    )
    useEffect(() => {
        productionDetailsFun();
    }, [location.state, productionDetailsFun])

    //返回
    const handleGoBack = () => {
        history.go('-1')
    }
    //导出计划
    const handleExport = show => {
        let downloadElement = document.createElement("a");
        downloadElement.href = `${ip}/sof-plan-detail/export/detail?plan=${location.state.id}&preview=${show}`;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(downloadElement);
    }

    return <ProductionDetailsOperationAll>
        <PageHeader
            className="site-page-header"
            title="生产计划详情"
            onBack={() => handleGoBack()}
            extra={[
                <Button key="1" type='primary' onClick={() => handleExport(true)}>预览计划</Button>,
                <Button key="2" type='primary' onClick={() => handleExport(false)}>导出计划</Button>

            ]}
        ></PageHeader>
        <Typography>
            <Title level={3}>基本信息</Title>
            {
                planDetail ? <Row>
                    <Col span={3}>产品型号:</Col>
                    <Col span={21}>{planDetail.product}</Col>
                    <Col span={3}>产品单价:</Col>
                    <Col span={21}>{planDetail.price}</Col>
                    <Col span={3}>数量:</Col>
                    <Col span={21}>{planDetail.amount}</Col>
                    <Col span={3}>约定生产时间:</Col>
                    <Col span={21}>{planDetail.antStartDate}</Col>
                    <Col span={3}>约定发货时间:</Col>
                    <Col span={21}>{planDetail.antEndDate}</Col>
                    <Col span={3}>实际生产时间:</Col>
                    <Col span={21}>{planDetail.ptlStartDate}</Col>
                    <Col span={3}>实际发货时间:</Col>
                    <Col span={21}>{planDetail.ptlEndDate}</Col>
                    <Col span={3}>备注:</Col>
                    <Col span={21}>{planDetail.remake}</Col>
                    <Col span={3}>合同文件:</Col>
                    <Col span={21}>
                        <Space>
                        {
                        planDetail.files.map(item => <a href = {item.path} key = {item.id}>{item.fileName}</a>)
                    }
                        </Space>
                    </Col>

                </Row> : null
            }
            <Title level={3}>生产线路</Title>
            {
                planDetail && planDetail.chains.map((val, index) => <Row style = {{borderBottom: "1px solid #ccc"}} key = {index}> 
                        <Col span={3}>主业部门:</Col>
                        <Col span={21}>{val.accDepartmentName}</Col>
                        <Col span={3}>预计完成时间:</Col>
                        <Col span={21}>{val.antEndDate}</Col>
                        <Col span={3}>作业人员:</Col>
                        <Col span={21}> {val.assignName}</Col>
                        <Col span={3}>实际完成时间:</Col>
                        <Col span={21}>{val.ptlEndDate}</Col>
                        {
                            val.daysRemaining >= 0 ? <>
                                <Col span={3}>
                                    剩余:
                                </Col>
                                <Col span={21}>
                                    {val.daysRemaining}天
                                </Col>
                            </>
                                :
                                <>
                                    <Col span={3}>
                                        逾期:
                                    </Col>
                                    <Col span={21}>
                                        {Math.abs(val.daysRemaining)}天  
                                    </Col>
                                </>
                        }

                        <Col span={3}>备注:</Col>
                        <Col span={21}>{val.remake}</Col>
                        {
                            val.files.length > 0 ? <>
                                <Col span={3}>附件:</Col>
                                <Col span={21}>
                                    <Space >
                                        {
                                            val.files.length > 0 && val.files.map((element, index )=> <a href={element.path} key = {index} >
                                                {element.fileName}
                                            </a>)
                                        }
                                    </Space>
                                </Col>
                            </> : null
                        }


                    </Row>
                )
            }
            <Title level={3}>生产日志</Title>
            {
                planDetail && planDetail.pdPlanLogs.map((item, index) => <Row style = {{borderBottom: "1px solid #ccc"}} key = {index}>
                    <Col span={3}>操作时间:</Col>
                    <Col span={21}>{item.actDate}</Col>
                    <Col span={3}>操作内容:</Col>
                    <Col span={21}>{item.actName}</Col>
                    <Col span={3}>操作人:</Col>
                    <Col span={21}> {item.actUserName}</Col>
                </Row>)
            }

        </Typography>
    </ProductionDetailsOperationAll>
}

export default ProductionPlanDetails;